<template>
  <div class="questions-preview">
    <el-dialog
      title="题目预览"
      :visible.sync="value"
      width="900px"
      :before-close="handleClose"
    >
      <el-row class="title-type">
        <el-col :span="6"
          >【题型】：{{
            questionType[questionInfo.questionType - 1].label
          }}题</el-col
        >
        <el-col :span="6">【编号】：{{ questionInfo.id }}</el-col>
        <el-col :span="6"
          >【难度】：{{ difficulty[questionInfo.difficulty - 1].label }}</el-col
        >
        <el-col :span="6">【标签】：{{ questionInfo.tags }}</el-col>
        <el-col :span="6">【学科】：{{ questionInfo.subjectName }}</el-col>
        <el-col :span="6">【目录】：{{ questionInfo.directoryName }}</el-col>
        <el-col :span="6">【方向】：{{ questionInfo.direction }}</el-col>
      </el-row>
      <hr />
      <span>【题干】：</span>
      <div class="question-text" v-html="questionInfo.question"></div>
      <div
        v-if="['1', '2'].includes(questionInfo.questionType)"
        class="question-desc"
      >
        {{ questionType[questionInfo.questionType - 1].label }}题
        选项：（以下选中的选项为正确答案）
      </div>
      <!-- 单选 -->
      <el-radio-group
        class="radios-wrap"
        v-if="questionInfo.questionType === '1'"
        v-model="radio"
        @change="radio = 1"
      >
        <el-radio
          v-for="(item, index) in questionInfo.options"
          :key="index"
          :label="item.isRight"
          >{{ item.title }}</el-radio
        >
      </el-radio-group>

      <!-- 多选 -->
      <el-checkbox-group
        class="checkbox-wrap"
        v-else-if="questionInfo.questionType === '2'"
        v-model="checkList"
        @change="checkList = [1]"
      >
        <el-checkbox
          v-for="(item, index) in questionInfo.options"
          :key="index"
          :label="item.isRight"
          >{{ item.title }}</el-checkbox
        >
      </el-checkbox-group>
      <!-- 简答 -->
      <div v-else></div>
      <hr />
      <div>
        <span>【参考答案】：</span>
        <el-button size="small" type="danger" @click="isVideoShow = true"
          >视频答案预览</el-button
        >
        <div v-if="isVideoShow && questionInfo.videoURL" class="video-wrap">
          <video
            class="video"
            autoplay
            :src="questionInfo.videoURL"
            controls="controls"
          ></video>
        </div>
      </div>
      <hr />
      <div class="answer-wrap">
        <span>【答案解析】：</span>
        <div v-html="questionInfo.answer"></div>
      </div>
      <hr />
      <div>
        <span>【题目备注】：{{ questionInfo.remarks }}</span>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleClose">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { questionType, difficulty } from '@/api/hmmm/constants.js'
export default {
  name: 'QuestionsPreview',
  props: {
    value: {
      type: Boolean,
      required: true
    },
    questionInfo: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      questionType: questionType,
      difficulty: difficulty,
      radio: 1, // 单选
      checkList: [1], // 多选
      isVideoShow: false
    }
  },
  methods: {
    handleClose() {
      this.$emit('input', false)
    }
  }
}
</script>

<style scoped>
.title-type .el-col {
  padding: 10px 0;
}
.question-text {
  color: blue;
}
.question-desc {
  margin-bottom: 5px;
}
/* .question-radio {
  padding: 8px 0;
} */
.radios-wrap {
  display: flex;
  flex-direction: column;
  height: 135px;
  justify-content: space-around;
}
.checkbox-wrap {
  display: flex;
  flex-direction: column;
  height: 175px;
  justify-content: space-around;
}
.answer-wrap {
  display: flex;
  align-items: center;
}
.video-wrap {
  width: 400px;
  height: 300px;
}
.video {
  height: 100%;
  width: 100%;
}
::v-deep .el-dialog__footer {
  text-align: right;
}
</style>
